<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="el-card">
        <!-- 卡片里的第一行 -->
        <!-- 并且将值传给子组件 -->
        <treeTools :tree-node="company" :is-root="true" @delDepts="getDepartments" @adddepartment="adddepartment" />
        <!-- 卡片里的第二行 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <treeTools slot-scope="{data}" :tree-node="data" @delDepts="getDepartments" @adddepartment="adddepartment" @editdepartment="editdepartment" />
        </el-tree>
      </el-card>
    </div>
    <addDept ref="addDepts" :tree-node="node" :showdiolig.sync="showDiolog" @addDepts="getDepartments" /></div>
</template>
<script>
// 引入子组件
import treeTools from './tree-tool'
// 引入请求
import { getDepartments } from '@/api/department'
// 调用改造数组的方法
import { transListToTreeData } from '@/utils'
// 引入新增功能的弹层
import addDept from './components/add-dept'
export default {
  // 注册组件
  components: {
    treeTools,
    addDept
  },
  data() {
    return {
      departs: [],
      company: { },
      node: null,
      defaultProps: {
        lebal: 'name'
      },
      showDiolog: false // 隐藏或者显示弹层的参数
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      console.log(result)
      console.log(result.depts)
      this.company = {
        name: result.companyName,
        manage: '负责人',
        id: ''
      }
      this.departs = transListToTreeData(result.depts, '')
    },
    adddepartment(node) {
      this.showDiolog = true
      this.node = node
    },
    editdepartment(node) {
      this.showDiolog = true
      this.node = node
      console.log('dadsa', node.id)
      console.log(this.$refs.addDepts)
      this.$refs.addDepts.getDepartDetail(node.id)
    }
  }
}
</script>

<style>
.el-card{
  padding: 30px 140px;
  font-size: 14px;
}
.operate{
  margin-left: 20px;
}

</style>
